/*
样例代码：
    <div mywizard class="sui-steps">
        <step>
            <label><span class="round"><i class="sui-icon icon-pc-right"></i></span><span>第一步 #4AA4D5</span></label>
            <i class="triangle-right-bg"></i><i class="triangle-right"></i>
        </step>
        <step>
            <label><span class="round">2</span><span>第二步 #333333</span></label>
            <i class="triangle-right-bg"></i><i class="triangle-right"></i>
        </step>
        <step>
            <label><span class="round">3</span><span>第三步 #999999</span></label>
        </step>
        <div stepcontent0 class="stepContent">
            第1个的内容{{a}}
            <input type="text" ng-model="xtitle" ng-change="test()" >{{xtitle}}
            <input type="button" class="sui-btn" value="下一步" mywizard-next />
        </div>
        <div stepcontent1 class="stepContent">
            第2个的内容
            <input type="text" ng-model="xtitle" ng-change="test()" >{{xtitle}}
            <input type="button" class="sui-btn" value="上一步" mywizard-previous />
            <input type="button" class="sui-btn" value="下一步" mywizard-next />
        </div>
        <div stepcontent2 class="stepContent">
            第3个的内容fsafsa
            <input type="text" ng-model="xtitle" ng-change="test()" >{{xtitle}}
            <input type="button" class="sui-btn" value="上一步" mywizard-previous />
        </div>
    </div>

其中的class可以参考：http://sui.taobao.org/sui/docs/steps.html
代码逻辑参考：http://jsfiddle.net/dschu012/9uT8X/
*/

(function() {
    'use strict';

    /**
     * @ngdoc directive
     * @name webApp.directive:mywizard
     * @description
     * # mywizard
     */
    angular.module('webApp')
        .directive('mywizard', function($compile) {
            return {
                restrict: 'EA',
                replace: true,
                scope: {
                    cstep: "=" //当前哪一步
                },
                controller: ['$scope', '$rootScope', '$timeout',
                    function($scope, $rootScope, $timeout) {
                        $scope.currentStep = 0;
                        $scope.steps = [];
                        $scope.stepContents = [];
                        $scope.goTo = function(index) {
                            if (index < 0 || index >= $scope.steps.length) return;
                            angular.forEach($scope.steps, function(step, key) {
                                if (key < index) {
                                    step.isFinished = true;
                                    step.isCurrent = false;
                                    step.isTodo = false;

                                    stepContentShow(key, false);
                                } else if (key == index) {
                                    step.isFinished = false;
                                    step.isCurrent = true;
                                    step.isTodo = false;

                                    stepContentShow(key, true);
                                } else {
                                    step.isFinished = false;
                                    step.isCurrent = false;
                                    step.isTodo = true;

                                    stepContentShow(key, false);
                                }

                                step.isCurrentStep = false;
                            });

                            $scope.currentStep = index;
                            $scope.steps[index].isCurrentStep = true;
                        }

                        function stepContentShow(key, show) {
                            var event = 'event:stepcontent' + key;
                            event = event + (show ? "_show" : "_hide");
                            // console.log("stepContentShow",key,show,event);

                            $rootScope.$broadcast(event, 'haha');
                            //$rootScope.$emit(event, 'hehe');
                        }
                        this.goTo = $scope.goTo;
                        this.isCurrentStep = function(step) {
                            return $scope.steps.indexOf(step) == $scope.currentStep;
                        }
                        this.isCurrentStepContent = function(step) {
                            return $scope.stepContents.indexOf(step) == $scope.currentStep;
                        }
                        this.next = function() {
                            for (var i = $scope.currentStep + 1; i < $scope.steps.length; i++) {
                                if (!$scope.steps[i].isHide) {
                                    $scope.goTo(i);
                                    break;
                                }
                            }
                        }
                        this.previous = function() {
                            for (var i = $scope.currentStep - 1; i >= 0; i--) {
                                if (!$scope.steps[i].isHide) {
                                    $scope.goTo(i);
                                    break;
                                }
                            }
                        }
                        this.addStep = function(step) {
                            $scope.steps.push(step);
                            step.indexId = $scope.steps.length - 1;
                            if ($scope.steps.length == 1) $scope.goTo(0);
                        }
                        this.addStepContent = function(step) {
                            $scope.stepContents.push(step);
                        }
                    }
                ],
                link: function(scope, element, attrs, wizardCtrl) {
                    scope.$watch("cstep", function(newVaule, oldValue) {
                        newVaule = Number(newVaule);
                        if (_.isNumber(newVaule) && !_.isNaN(newVaule)) {
                            scope.goTo(newVaule);
                        }
                    });
                }
            }
        })
        .directive('step', function() {
            return {
                restrict: 'E',
                template: '<div class="wrap"><div ng-class="{current:isCurrent, finished:isFinished, todo:isTodo}" ng-transclude></div></div>',
                replace: true,
                transclude: true,
                scope: {
                    hide: "@"
                },
                require: '^mywizard',
                link: function($scope, $element, $attrs, wizardCtrl) {
                    if ($scope.hide == "true") {
                        $scope.isHide = true;
                        $element.hide();
                    } else {
                        $scope.isHide = false;
                    }
                    $scope.isFinished = false;
                    $scope.isCurrent = false;
                    $scope.isTodo = true;
                    wizardCtrl.addStep($scope);
                    $scope.isCurrentStep = wizardCtrl.isCurrentStep($scope);
                }
            };
        });

    function stepContentx(xindex) {
        angular.module("webApp").directive('stepcontent' + xindex, function($compile) {
            return {
                restrict: 'A',
                replace: false,
                require: '^mywizard',
                link: function($scope, $element, $attrs, wizardCtrl) {
                    $scope.$on('event:stepcontent' + xindex + '_hide', function(a) {
                        //console.log('event:stepcontent' + xindex + '_hide',a)
                        $element.hide();
                    });

                    $scope.$on('event:stepcontent' + xindex + '_show', function(a) {
                        //console.log('event:stepcontent' + xindex + '_show',a)
                        $element.show();
                    });

                    wizardCtrl.goTo(0);
                }
            };
        });
    }

    //生产10个stepcontent
    for (var i = 0; i < 15; i++) {
        stepContentx(i);
    }

    function wizardButtons(action, functionName) {
        angular.module("webApp").directive("mywizard" + action, function($timeout) {
            return {
                restrict: 'A',
                replace: false,
                require: '^mywizard',
                link: function($scope, $element, $attrs, wizardCtrl) {
                    $element.on("click", function(e) {
                        e.preventDefault();
                        $timeout(function() {
                            wizardCtrl[functionName]();
                        });
                    })
                }
            };
        });
    }
    wizardButtons('Next', 'next');
    wizardButtons('Previous', 'previous');
})();
